<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Username-CC音乐</title>
<jsp:include page="headLink.jsp"></jsp:include>
<!--时间选择插件-->
<link rel="stylesheet"
	href="js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
<!--日期选择插件-->
<link rel="stylesheet"
	href="js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
<link href="css/style.min.css" rel="stylesheet">
</head>
<body>
	<!--页头 -->
	<div class="lyear-layout-container">
		<header class="lyear-layout-header"> <!--保持居中的秘密不可更改！！！-->
		<div class="header-container">
			<div class="header-top">
				<a href="homePage.jsp" class="logo"></a>
				<nav class="header-nav">
				<ul>
					<li><a href="homePage.jsp">音乐馆</a></li>
					<li><a href="personal.jsp">我的音乐</a></li>
				</ul>
				</nav>
				<div class="header-search">
					<input type="text" class="text" placeholder="搜索">
					<!--<div class="btn"><i class="icon-sprite"></i></div>-->
					<div class="result">
						<a href="#" class="result-item"> <span class="rank">1</span> <span
							class="title">默</span> <span class="num">3.4万</span>
						</a> <a href="#" class="result-item"> <span class="rank">2</span>
							<span class="title">侧田</span> <span class="num">3.4万</span>
						</a> <a href="#" class="result-item"> <span class="rank">3</span>
							<span class="title">让我留在你身边</span> <span class="num">3.4万</span>
						</a> <a href="#" class="result-item"> <span class="rank">4</span>
							<span class="title">皮皮虾我们走</span> <span class="num">3.4万</span>
						</a> <a href="#" class="result-item"> <span class="rank">5</span>
							<span class="title">欢乐好声音</span> <span class="num">3.4万</span>
						</a>
						<div class="history">
							<span>搜索历史</span> <i class="icon-sprite"></i>
						</div>
					</div>
				</div>

				<ul class="topbar-right login-mod">
					<li class="dropdown dropdown-profile"><a
						href="javascript:void(0)" data-toggle="dropdown"> <img
							class="img-avatar img-avatar-48 m-r-10"
							src="images/headPhoto1.jpg" alt="灰质"> <span>${sessionScope.user.uname}<span
								class="caret"></span></span>
					</a>
						<ul class="dropdown-menu dropdown-menu-right">
							<li><a href="userInfo.jsp"><i class="mdi mdi-account"></i>
									个人信息</a></li>
							<li><a href="#" data-toggle="modal" data-target="#updatepwd"><i
									class="mdi mdi-lock-outline"></i> 修改密码</a></li>
							<li class="divider"></li>
							<li><a href="../loginOutServlet"><i
									class="mdi mdi-logout-variant"></i> 退出登录</a></li>
						</ul></li>
				</ul>
			</div>
		</div>
		</header>
		<!-- 个人头像和横幅背景 -->
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12 profilebg">
					<div class="mesosphere-photo">
						<div class="profile_cover_link">
							<img class="head_photo" src="images/headPhoto1.jpg"
								onerror="this.src='//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=31536000';this.onerror=null;"
								alt="@Arya." class="profile__cover" id="profileHead">
						</div>
					</div>
					<div class="mesosphere-name">
						<div class="profile_cover_name_link">${sessionScope.user.uname}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 个人资料详情 -->
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-8">
				<div class="card-body">
					<div class="card-header">
						<h3>个人资料</h3>
					</div>
					<div class="card-body form-area">
						<!-- 表格里内容左右设置37开col-md-3/7可保持对齐 -->
						<form class="form-horizontal form-left" action="" method="post" id="myform"
							onsubmit="return false;">
							<div class="form-group">
								<label class="col-md-3 control-label left-text-width"
									for="example-hf-email" style="font-weight: 500;">账户</label>
								<div class="col-md-7">
									<input class="form-control" type="text" id="uname"
										name="example-hf-email" placeholder="${sessionScope.user.uname}"  >
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label left-text-width"
									for="example-hf-password" style="font-weight: 500;" >介绍</label>
								<div class="col-md-7">
									<textarea class="form-control" id="intr"
										name="example-textarea-input" rows="6" placeholder="${sessionScope.user.introduce}" ></textarea>
								</div>
							</div>
							<div class="form-group">
								<div class="example-box">
									<label class="col-md-3 control-label left-text-width"
										for="example-hf-password" style="font-weight: 500;" id="usex">性别</label>
									<div class="col-md-7">
										<label class="lyear-radio radio-primary m-t-10 "> <input
											type="radio" checked="checked" name="r1" value="男" id="man"> <span>男</span>
										</label> <label class="lyear-radio radio-primary m-t-10"> <input
											type="radio"  name="r1" value="女" id="woman"> <span>女</span>
										</label>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label left-text-width"
									for="example-hf-password" style="font-weight: 500;"
									>生日</label>
								<div class="col-md-7">
									<input class="form-control js-datepicker m-b-10" type="text"
										id="birthday" name="example-datepicker1"
										data-date-format="yyyy/mm/dd" placeholder="${sessionScope.user.birthday}">
								</div>
							</div>
							<div class="form-group">
								<div class="col-md-7 col-md-offset-1">
									<button class="btn btn-primary" type="submit" id="btn1">保存</button>
								</div>
							</div>
						</form>

					</div>
				</div>
			</div>
			<div class="col-md-2"></div>
		</div>
	</div>
	<!-- 修改密码模态框   wwb -->
	<div class="modal fade" id="updatepwd" tabindex="-1" role="dialog"
		aria-labelledby="updatepwd">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">密码修改</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="user-name" class="control-label">原密码：</label> <input
								type="password" class="form-control" id="updatepwd1"
								placeholder="请输旧密码...">
						</div>

						<div class="form-group">
							<label for="user-pwd" class="control-label">新密码：</label> <input
								type="password" class="form-control" id="updatepwd2"
								placeholder="请输新密码...">
						</div>

						<div class="form-group">
							<label for="user-pwd" class="control-label">再次新密码：</label> <input
								type="password" class="form-control" id="updatepwd3"
								placeholder="请再次输入新密码...">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="btn_update">确认修改</button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
	<!--时间选择插件-->
	<script src="js/bootstrap-datetimepicker/moment.min.js"></script>
	<script
		src="js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
	<script src="js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
	<!--日期选择插件-->
	<script src="js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
	<script
		src="js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
	<script type="text/javascript" src="js/main.min.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script>
	//修改个人信息保存点击事件

		$(function() {
			$("#btn1").click(
					function() {
						var uid = ${sessionScope.user.uid};
						var uname=$("#uname").val();
						if(uname==""){
							uname="${sessionScope.user.uname}";
						}
						$.get("../user", "op=update&uname=" + uname
								+ "&intr=" + $("#intr").val() + "&usex="
								+ $("[name=r1]:checked").val() + "&birthday="
								+ $("#birthday").val() + "&uid=" + uid,
								function(data) {
									if (data.msg == "修改成功") {
										layui.use([ 'layer', 'form' ],
												function() {
													var layer = layui.layer
													layer.alert("修改成功,请重新登录", {
														icon : 6,
														time: 3000,
														skin : 'layer-ext-moon'
													})
												})
												window.location.href="../loginOutServlet";
									} else if (data.msg == "修改失败") {
										layui.use([ 'layer', 'form' ],
												function() {
													var layer = layui.layer
													layer.alert(data.msg, {
														icon : 2,
														skin : 'layer-ext-moon'
													})
												})
									}
								})
					})
		})
	  $(document).ready(function(){
		  var flag=${sessionScope.user.usex=="男"};
		  if(flag){
			  $("#man").attr("checked","checked");
		  }else{
			  $("#woman").attr("checked","checked");
		  }
	  })
	</script>
	<script type="text/javascript">
	<!-- 修改密码功能，校验输入的旧密码是否与session中的密码相同  --wwb -->
		$(function(){
			$("#updatepwd1").blur(function(){
				var upwd="";
				var flag=${sessionScope.user!=null};
				if(flag){
					$("#updatepwd2").removeAttr("readonly");
					$("#updatepwd3").removeAttr("readonly");
					var oldpwd=$("#updatepwd1").val();
					var upwd=${sessionScope.user.pwd}
					console.log(upwd);
					if(oldpwd!=upwd){
						layui
						.use(
								[
										'layer',
										'form' ],
								function() {
									var layer = layui.layer
									layer
											.alert(
													"密码错误",
													{
														icon : 2,
														skin : 'layer-ext-moon'
													})
								})
								$("#updatepwd2").attr("readonly",true);
								$("#updatepwd3").attr("readonly",true);
						
					}
				}								
			});			
			// 修改密码功能，再次输入密码与新密码比较   wwb 				
			$("#updatepwd3").blur(function(){
				$("#btn_update").attr("disabled", false);
				var newpwd=$("#updatepwd2").val();
				var renewpwd=$("#updatepwd3").val();
				if(renewpwd!=newpwd){
					layui
					.use(
							[
									'layer',
									'form' ],
							function() {
								var layer = layui.layer
								layer
										.alert(
												"密码不一致",
												{
													icon : 2,
													skin : 'layer-ext-moon'
												})
							})
							$("#btn_update").attr("disabled", true); 
				}
				
			});
			
			//修改密码功能，确认修改按钮事件   wwb
			$("#btn_update").click(function(){
				var oldpwd=$("#updatepwd1").val();
				var newpwd=$("#updatepwd2").val();
				var renewpwd=$("#updatepwd3").val();
				var uid=${sessionScope.user.uid}
				//console.log(uid);
				$.ajax({
					type:"post",
					url:"../ZhuCeServlet?op=updatePwd",
					data:{
						"oldpwd":oldpwd,
						"newpwd":newpwd,
						"uid":uid
					},
					success:function(data){
						if(data.msg=="修改成功"){
							layui
							.use(
									[
											'layer',
											'form' ],
									function() {
										var layer = layui.layer;
										layer
												.alert(
														"修改成功，请重新登入",
														{
															icon : 2,
															skin : 'layer-ext-moon',
															time : 5000
														})
													
									})
									window.location.href="../loginOutServlet";
						}
					}
					
				});
			});
			
		});
	</script>
</body>
</html>